@import '../../assets/m-var.less';
.upload-component-box{
	/deep/.el-dialog__header{
		border-bottom: 1px solid @cutOffRuleColor;
		height: 48px;
		line-height: 48px;
		padding: 0 20px;
		.el-dialog__headerbtn {
			top: 15px !important;
			width: 18px;
			height: 18px;
			background: url('@assets/img/close-button.png') left no-repeat;
			background-size: cover;
		 }
		 .el-dialog__headerbtn i {
			content: '修改下面的font-size可以改变图片的大小';
			font-size: 18px;
			visibility: hidden;
		 }
	}
	/deep/.el-dialog__body{
		padding: 23px 10px 20px 10px;  
		//自定义step
		// .el-dialog__headerbtn {
		// 	top: 8px !important;
		// 	background: url('https://你路径资源的url图片') left no-repeat;
		// 	background-size: cover;
		// }
		// .el-dialog__headerbtn i {
		// 		content: '修改下面的font-size可以改变图片的大小';
		// 		font-size: 25px;
		// 		visibility: hidden;
		// }
		.content{
			margin-bottom: 30px;
			.upload-component--step{
				padding: 0 9.5% 0 5.3%;
				/deep/.el-step{
					// flex-basis: 33.3% !important;
					margin-bottom: 10px;
				}
				.el-step__main{
					display: inline-block;
					width: 50%;
					text-align: left;
					position:relative;
				}
				.el-step__title.is-finish .slot-file .el-step__line{
					background-color: @dominantHue;
				}
				.el-step.is-center .el-step__line {
					background-color: @cutOffRuleColor;
					left: 75%;
					right: -50%;
				}
				.el-step__title.is-finish{
					font-size: @emphasizeFontSize;
					color: @dominantHue;
					font-weight: 500;
					line-height: 22px;
				}
				.el-step__title.is-process{
					font-size: @emphasizeFontSize;
					color: @titleTextColor;
					font-weight: 500;
					line-height: 22px;
				}
				.el-step__title.is-wait{
					font-size: @emphasizeFontSize;
					color: @titleTextColor;
					font-weight: 500;
					line-height: 22px;
				}
				.el-step__head.is-finish .el-step__icon{
					background-color: @dominantHue;
					border: 1px solid @dominantHue;
					color: @fontBackgroundColor;
					width: 30px;
					height: 30px;
				}
				.el-step__head.is-process .el-step__icon{
					background-color: @tableMenuColor;
					border: 1px solid @tableMenuColor;
					color: @subheadingButtonColor;
					width: 30px;
					height: 30px;
				}
				.el-step__head.is-wait .el-step__icon{
					background-color: @tableMenuColor;
					border: 1px solid @tableMenuColor;
					color: @subheadingButtonColor;
					width: 30px;
					height: 30px;
				}
				// .el-step__title.is-finish{
				// 	color: @dominantHue;
				// }
				// /deep/.is-text{
				// 	background-color: @dominantHue;
				// 	color: @fontBackgroundColor;
				// }
				.el-step__head{
					width: 50%;
					display: inline-block;
					text-align: right;
					padding: 0 10px 0 0;
					height: 30px;
					.el-step__line {
						display: none;
					}
				}
			}
		}
	}
	
	.main{
		min-height: 274px;
		_height: 274px;
		.download{
			width: 93%;
			margin: auto;
			border: 1px solid @cutOffRuleColor;
			border-radius: 3px;
			display: flex;
			margin-top: 10px;
			.download_left{
				width: 86px;
				img{
					margin: 27px 0 0 10px;
					width: 76px;
					height: 76px;
				}
			}
			.download_right_one{
				padding: 20px 8px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 100%;
				.title_box{
					font-size: @emphasizeFontSize;
					font-weight: 550;
					line-height: 22px;;
					color: @titleTextColor;
					margin: 0;
				}
				.center_box{
					margin: 12px 0 12px 0;
					font-size: @commonFontSize;
					color: @narrateTextColor;
					line-height: 20px;
				}
				.downloadTemplate{
					color: @dominantHue;
					font-size: @emphasizeFontSize;
					line-height: 2px;
					margin: 0;
				}
			}
			.download_right{
				padding: 20px 8px 20px 8px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 100%;
				.title_box{
					font-size: @emphasizeFontSize;
					font-weight: 550;
					line-height: 22px;;
					color: @titleTextColor;
					margin: 0;
				}
				.center_box{
					margin: 12px 0 12px 0;
					font-size: @commonFontSize;
					color: @narrateTextColor;
					line-height: 20px;
				}
				.downloadTemplate{
					color: @dominantHue;
					font-size: @emphasizeFontSize;
					line-height: 22px;
					margin: 0;
				}
				/deep/.el-upload-list{
					max-height: 75px;
					_height: 75px;
					width: 360px;
					overflow: auto;
					.el-upload-list__item{
						height: 26px;
						font-size: @commonFontSize;
						.el-upload-list__item-name{
							line-height: 25px;
							color: @subheadingButtonColor;
						}
					}
					.el-upload-list__item:hover {
						background-color: @backdropColor;
					}
				}
			}
		}
	}
	.main_second{
		padding: 0 26px;
		.download_second{
			// width: 93%;
			height: 66px;
			border: 1px solid @cutOffRuleColor;
			padding: 0 140px;
			margin: auto;
			border-radius: 3px;
			display: flex;
			margin-top: 10px;
			justify-content: space-between;
			align-items: center;
			.number{
				font-size: @commonFontSize;
				color: @titleTextColor;
			}
		}
		.abnormal_prompt{
			// width: 93%;
			height: 195px;
			margin: auto;
			margin-top: 10px;
			border-radius: 3px;
			border: 1px solid @cutOffRuleColor;
			.abnormal_prompt_title{
				padding: 14px 0 14px 14px;
				font-size: @emphasizeFontSize;
				color: @titleTextColor;
				font-weight: bold;
			}
			.download_exception{
				padding: 0 10px 0 14px;
				margin: 0 0 10px 0;
				height: 28px;
				width: 360px;
				line-height: 28px;
				// display: flex;
				// justify-content: space-between;
				.download_exception_left{
					width: 320px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					.error_message{
						color: @subheadingButtonColor;
						font-size: @commonFontSize;
					}
				}
				.download_exception_right{
					display: none;
				}
			}
			.download_exception:hover{
				padding: 0 10px 0 14px;
				height: 28px;
				line-height: 28px;
				width: 360px;
				background-color: @backdropColor;
				display: flex;
				justify-content: space-between;
				.download_exception_left{
					.error_message{
						color: @subheadingButtonColor;
						font-size: @commonFontSize;
					}
				}
				.download_exception_right{
					display: block;
					font-size: @commonFontSize;
					color:@subheadingButtonColor;
				}
				.download_exception_right:hover{
					display: block;
					font-size: @commonFontSize;
					color:@dominantHue;
				}
			}
			
			.abnormal_prompt_content{
				padding: 0 0 0 14px;
				height: 110px;
				overflow: auto;
				font-size: @commonFontSize;
				color: @subheadingButtonColor;
				line-height: 24px;
				white-space:pre-line;
			}
		}
	}
	.main_third{
		.progress{
			height: 350px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.progress_content{
				display: flex;
				justify-content: center;
				align-items: center;
				.progressBar{
					width: 450px;
					margin-left: 15px;
				}
				.percentage{
					font-size: @emphasizeFontSize;
					color: @dominantHue;
				}
			}
			.tip{
				font-size: @emphasizeFontSize;
				color: @narrateTextColor;
				line-height: 22px;
				margin-top: 37px;
			}
		}
	}
	/deep/.el-dialog__footer{
		border-top: none;
		text-align: center;
		.el-button{
			width: 90px;
			height: 38px;
			border-radius: 3px;
		}
		.el-button--default{
			border: 1px solid @inputBoxColor;
			background-color: @tableMenuColor;
			color:@subheadingButtonColor;
		}
		.el-button--default:hover{
			background-color: @cutOffRuleColor;
			border: 1px solid @inputBoxColor;
			color:@subheadingButtonColor;
		}
		.el-button--primary.is-disabled{
			background-color: @buttonBorderColor;
			border: 1px solid @buttonBorderColor;
		}
		// .el-button--primary{
			// background-color: @dominantHue;
			// border: 1px solid @dominantHue;
		// }
	}
	.import_content{
		height: 260px;
		display: flex;
		padding: 60px;
		flex-direction: column;
		// justify-content: center;
		align-items: center;
		.import_content_b{
			font-size: 22px;
			line-height: 28px;
			color: @titleTextColor;
			margin: 18px 0 18px 0;
		}
		.import_content_span{
			font-size: @commonFontSize;
			line-height: 20px;
			color: @subheadingButtonColor;
		}
	}
}